<template>
  <div ref="childrenItem">
    <el-collapse class="coll-wrap" v-if="dataList && dataList.length > 0" accordion>
      <div v-for="(item, i) in dataList" :key="i">
        <el-collapse-item v-if="item.children && item.children.length" :title="item.title" :name="i">
          <asideBarItem v-if="item.children && item.children.length" :dataList="item.children" v-on="$listeners"
            :status="status" />
        </el-collapse-item>
        <div class="content_item" v-if="item.taskId">
          <el-tooltip class="item" effect="dark" :content="item.remark || '暂无备注信息'" placement="left">
            <div @click="jumpRouter(item.routeAddress, item.taskId, item.content)">{{ item.content }}</div>
          </el-tooltip>
          <i class="el-icon-delete delecte_view" @click="deleteItem(item.taskId)"></i>
        </div>
      </div>
    </el-collapse>
    <span v-else class="content">暂无分析记录...</span>
  </div>
</template>

<script>
import { deleteDrawTaskRecordRequest } from '@/api/tools'
export default {
  name: "asideBarItem",
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sessionId: localStorage.getItem('homeSessionId')
    };
  },
  methods: {
    //跳转页面
    jumpRouter(value, taskId, content) {
      if (this.status === 'successful') {
        let name = value.substring(1, value.length)
        if (this.$router.history.current.name == name) {
          //如果在当前页面切换任务
          this.$emit('taskChange', taskId)
        } else {
          this.$router.push({
            name,
            params: {
              taskId
            }
          })
        }
      } else if (this.status === 'failureCount') {
        window.open(`${this.$url(window.location.origin)}/taskManagement?taskId=${content}`)
      }
    },
    //删除任务
    deleteItem(value) {
      this.$confirm('该操作会永久清除任务记录,是否确认?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            let pageCode = this.$router.history.current.name
            deleteDrawTaskRecordRequest(value, this.sessionId, pageCode).then(res => {
              if (res.code !== 200) return this.$message.error(res.message)
              // this.$emit('deleteItem',true)
            })
          } else if (action === 'cancel') {
            this.$message({
              message: '取消操作',
            })
          }
          done();
        }
      }).catch(() => { })

    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-collapse .el-collapse-item__header {
  background-color: #f0f0f0;
  border: 0;

}

::v-deep .el-collapse .el-collapse-item__header::after {
  width: 0;
  height: 0;
}

.content {
  display: block;
  text-align: center;
  color: #888;
  font-size: 14px;
  font-weight: 700;
}

::v-deep .el-collapse {
  border: 0;

  .el-collapse-item .el-collapse-item {
    .el-collapse-item__header {
      background-color: #fff;

      &:hover {
        background-color: #eef7ff;
      }
    }
  }

  .el-collapse .el-collapse-item__content {
    padding: 5px 0;
  }

  .el-collapse-item__header {
    background-color: #f1f1f1;

    border: 0;
    height: 40px;
    // margin-bottom: 5px;
    padding-left: 8px;
    border-radius: 3px;
    border: 0;
  }
}

.content_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  cursor: alias;
  padding: 0 10px;

  &:hover {
    color: #309cff;
  }
}

.delecte_view {
  cursor: pointer;
}
</style>

